<!DOCTYPE html>
<%@ include file="../base.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <link href="images/favicon.ico" mce_href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <title>注册</title>
        <%@ include file="../js.jsp"%>
    </head>
    <body ontouchstart>
        <div class="page-relative">
        	<form action="${ctx}/member/register" id="register_form" method="post">
	            <div class="bd">
	                <h3 class="text-center text-blue padding-t-20">注册会员</h3>
                 	<div class="weui_cells weui_cells_form border-bottom">
	                	<input type="hidden" id="stationId" name="stationId" value="${stationId}"/>
	                	<input type="hidden" id="hqName" name="hqName" value="${hqName}"/>
                     	<div class="weui_cell">
	                        <div class="weui_cell_hd"><label class="weui_label">姓名 <span class="text-red">*</span></label></div>
                         	<div class="weui_cell_bd weui_cell_primary">
	                            <input class="weui_input" type="text" placeholder="请输入姓名" id="name" name="name" />
	                        </div>
	                    </div>
	                    <div class="weui_cell">
	                        <div class="weui_cell_hd"><label class="weui_label">手机号 <span class="text-red">*</span></label></div>
	                        <div class="weui_cell_bd weui_cell_primary">
	                            <input class="weui_input" type="tel" maxlength="11" id="phoneNum" name="phoneNum" placeholder="请输入手机号"/>
	                        </div>
	                    </div>
                        <div class="weui_cell weui_vcode">
	                        <div class="weui_cell_hd"><label class="weui_label">验证码 <span class="text-red">*</span></label></div>
	                        <div class="weui_cell_bd weui_cell_primary">
	                            <input class="weui_input" type="number" id="authCode" name="authCode" maxlength="6" placeholder="请输入验证码"/>
	                        </div>
	                        <div class="weui_cell_ft">
	                            <button type="button" class="weui_btn weui_btn_primary no-border-radius" id="sendCode">验证码</button>
	                        </div>
	                    </div>
                        <div class="weui_cell bg-white">
                        	<div class="weui_cell_hd"><label class="weui_label">身份证</label></div>
	                        <div class="weui_cell_bd weui_cell_primary">
	                            <input class="weui_input" type="number" maxlength="18" id="idCard" name="idCard" placeholder="请输入身份证"/>
	                        </div>
	                    </div>
	                    <div class="weui_cell bg-white no-padding-t no-padding-b">
	                        <div class="weui_cell_hd"><label class="weui_label">车牌号</label></div>
	                        <div class="weui_cell weui_cell_select weui_select_before no-before">
	                            <div id="showActionSheet" class="keyboard-input">川</div>
	                            <div class="weui_cell_bd weui_cell_primary">
	                                <input class="weui_input" type="url" id="licensePlate" name="licensePlate" maxlength="6" placeholder="请输入车牌号"/>
	                                <input type="hidden" id="licensePlatePut" name="licensePlatePut" />
	                            </div>
	                        </div>
	                    </div>
	                    <div class="weui_cell bg-white">
	                        <div class="weui_cell_hd"><label class="weui_label">加油密码</label></div>
	                        <div class="weui_cell_bd weui_cell_primary">
	                            <input class="weui_input" type="password" id="fuellingPassword" name="fuellingPassword" maxlength="6" placeholder="6位数字，不输入则代表无密码"/>
	                        </div>
	                    </div>
	                    
               		</div>
	                <div class="weui_btn_area">
                     	<button class="weui_btn weui_btn_primary"  id="showDialog" disabled>确定</button>
	                </div>
                </div>
            </form>
            
            
            <!--BEGIN actionSheet-->
            <div id="actionSheet_wrap">
                <div class="weui_mask_transition" id="mask"></div>
                <div class="weui_actionsheet" id="weui_actionsheet">
                    <div class="weui_actionsheet_menu">
                        <div class="oil_keyboard">
                            <div class="oil_key">
                                <div><p>京</p></div>
                                <div><p>沪</p></div>
                                <div><p>浙</p></div>
                                <div><p>苏</p></div>
                                <div><p>粤</p></div>
                                <div><p>鲁</p></div>
                                <div><p>晋</p></div>
                                <div><p>冀</p></div>

                                <div><p>豫</p></div>
                                <div><p>川</p></div>
                                <div><p>渝</p></div>
                                <div><p>辽</p></div>
                                <div><p>吉</p></div>
                                <div><p>黑</p></div>
                                <div><p>皖</p></div>
                                <div><p>鄂</p></div>

                                <div><p>湘</p></div>
                                <div><p>赣</p></div>
                                <div><p>闵</p></div>
                                <div><p>陕</p></div>
                                <div><p>甘</p></div>
                                <div><p>宁</p></div>
                                <div><p>蒙</p></div>
                                <div><p>津</p></div>

                                <div style="width: 6.25%"></div>
                                <div><p>贵</p></div>
                                <div><p>云</p></div>
                                <div><p>桂</p></div>
                                <div><p>琼</p></div>
                                <div><p>青</p></div>
                                <div><p>新</p></div>
                                <div><p>藏</p></div>
                            </div>
                        </div>
                    </div>
                    <div class="weui_actionsheet_action">
                        <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
                    </div>
                </div>
            </div>
            <!--END actionSheet-->
            
            <div class="push"></div>
         </div>
         
        <div class="footer-relative bg-gray">
		    <span>本服务由</span>
		    <img src="${ctx}/assets/images/logo.png" title="油掌柜" />
		    <span>提供技术支持</span>
		</div>
         
         <script>
        $(function () {
        	$("#xieyi").change(function(){
        		if($("#xieyi").prop('checked')==true &&
        				$("#authCode").val() != null && $("#authCode").val() != "" &&
        				$("#name").val() != null && $("#name").val() != "" &&
        				$("#phoneNum").val() != null && $("#phoneNum").val() != ""){
        			$("#showDialog").prop('disabled', false);
        		}else{
        			$("#showDialog").prop('disabled', true);
        		}
        	});
        	
        	$("#name").bind('input propertychange',function(){
        		if(
        				$("#authCode").val() != null && $("#authCode").val() != "" &&
        				$("#name").val() != null && $("#name").val() != "" &&
        				$("#phoneNum").val() != null && $("#phoneNum").val() != ""){
        			$("#showDialog").prop('disabled', false);
        		}else{
        			$("#showDialog").prop('disabled', true);
        		}
        	});
        	
        	$("#phoneNum").bind('input propertychange',function(){
        		if(
        				$("#authCode").val() != null && $("#authCode").val() != "" &&
        				$("#name").val() != null && $("#name").val() != "" &&
        				$("#phoneNum").val() != null && $("#phoneNum").val() != ""){
        			$("#showDialog").prop('disabled', false);
        		}else{
        			$("#showDialog").prop('disabled', true);
        		}
        	});
        	
        	$("#authCode").bind('input propertychange',function(){
        		if(
        				$("#authCode").val() != null && $("#authCode").val() != "" &&
        				$("#name").val() != null && $("#name").val() != "" &&
        				$("#phoneNum").val() != null && $("#phoneNum").val() != ""){
        			$("#showDialog").prop('disabled', false);
        		}else{
        			$("#showDialog").prop('disabled', true);
        		}
        	});
        	
        	//验证码按钮倒计时
            $('#sendCode').click(function() {
            	var phoneNum = $("#phoneNum").val();
            	if(!phoneNum.match(/1[0-9]{10}$/)){
					 alert("手机号码输入不合法", null, function () {});  
				     return  false;  
				}
            	sendCode();
            	var time = 59;
                var button = $(this);
                var countDown = setInterval(frame, 1000);
                button.prop('disabled', true);
                function frame() {
                    if(time === 0) {
                        clearInterval(countDown);
                        button.html('验证码');
                        button.prop('disabled', false);
                    } else {
                        button.html(time-- + 's');
                    }
                }
            });
        	
            function sendCode(){
				var phoneNum = $("#phoneNum").val();
				var stationId = $("#stationId").val();
				var hqName = $("#hqName").val();
				$.ajax({
				   type:"POST",
				   url:"${ctx}/member/generateCode",
				   data:{stationId:stationId,phoneNum:phoneNum,hqName:hqName},
				   success: function(data){
					   if(data.code == 0){
						   alert("发送成功", null, function () {});
					   }else{
					     alert(data.msg, null, function () {});
					   }
				   }
				});
			}

            $('#showActionSheet').click(function() {
                var mask = $('#mask');
                var weuiActionsheet = $('#weui_actionsheet');
                weuiActionsheet.addClass('weui_actionsheet_toggle');
                mask.show().addClass('weui_fade_toggle').click(function () {
                    hideActionSheet(weuiActionsheet, mask);
                });
                $('#actionsheet_cancel').click(function () {
                    hideActionSheet(weuiActionsheet, mask);
                });
                weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');

                // Layout
                var width = weuiActionsheet.find('p').width();
                weuiActionsheet.find('p').css({
                    height: width,
                    "line-height": width + "px"
                });
                weuiActionsheet.find('.oil_key').css({
                    height: width * 4.44444444 - 6
                });
                $('.oil_key div').css({
                    "margin-bottom": (width / 9) + "px"
                });

                // Get Value
                weuiActionsheet.find('p').on('click', function () {
                    var region = $(this).html();
                    $('#showActionSheet').html(region);
                    hideActionSheet(weuiActionsheet, mask);
                });

                function hideActionSheet(weuiActionsheet, mask) {
                    weuiActionsheet.removeClass('weui_actionsheet_toggle');
                    mask.removeClass('weui_fade_toggle');
                    weuiActionsheet.on('transitionend', function () {
                        mask.hide();
                    }).on('webkitTransitionEnd', function () {
                        mask.hide();
                    })
                }
            });
        });
	        
		        /* if ($('#keyboard_keyboard').display === 'none') {
		        $('.wrapper-transparent').hide();
		    } else {
		        $('.wrapper-transparent').show();
		    }*/
		
		    $('#showDialog').click(function() {
		    	/* var $dialog = $('#dialog');
                $dialog.show();
                $dialog.find('.weui_btn_dialog').on('click', function () {
                    $dialog.hide();
                }); */
		    	var b = register();
		    	if(b){
		    		$("#register_form").submit();
		    	}
		    	return false;
		    });
		    
			function register(){
				var stationId = $("#stationId").val();
				var name = $("#name").val();
				var phoneNum = $("#phoneNum").val();
				var idCard = $("#idCard").val();
				var licensePlate = $("#showActionSheet").text()+$("#licensePlate").val();
			 	$("#licensePlatePut").val(licensePlate);
				var fuellingPassword = $("#fuellingPassword").val();
				var authCode = $("#authCode").val();
				if(name == ''){
					alert("姓名不能为空", null);
					return false;
				}
				if(authCode == ''){
					alert("请输入验证码", null);
					return false;
				}
				if(!phoneNum.match(/1[0-9]{10}$/)){
					 alert("手机号码输入不合法", null);
					 return false;
				}
				if(fuellingPassword != ''){
					if(!fuellingPassword.match(/[0-9]{6}$/)){
						 alert("密码为6位数字", null);
						 return false;
					}
				}
				var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if(idCard != ''){
					if(reg.test(idCard) === false){  
				       alert("身份证输入不合法", null);
				       return false;
				   	}
				}
				return true;
			}
			
        </script>
    </body>
</html>